<template>
  <div>
  <el-input
      class="input-with-select"
      v-model="components_fuzzy_search.value"
      @keyup.enter="autocomplete_big_info()"
      @blur="check_input"
      ref="inputRef"
  >

    <template #prepend>
      <el-radio-group v-model="components_fuzzy_search.mode">
        <el-radio-button value="前缀">前缀</el-radio-button>
        <el-radio-button value="名称">名称</el-radio-button>
      </el-radio-group>
    </template>

    <template #append>
      <el-button @click="clear_all()">
        <el-icon>
          <Delete/>
        </el-icon>
      </el-button>
    </template>

  </el-input>
  </div>

  <!-- 弹出选择框 -->
  <el-dialog v-model="visible" :width="500" @close="dialog_close">
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        @row-dblclick="select_small"
        stripe

    >
      <el-table-column type="index" width="50" />
      <el-table-column prop="value" label="大类名称"/>
      <el-table-column prop="prefix" label="前缀"/>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 500]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total=" total "
    />
  </el-dialog>

</template>

<script setup lang="ts">
import {Delete} from "@element-plus/icons-vue";
import {reactive, ref, watch} from "vue";
import {reqBigFuzzySearch} from "@/api/first/FuzzySearch";
import {BigFuzzyList, BigFuzzySearchResponse} from "@/api/first/FuzzySearch/type.ts";


// 检查失去焦点后，看填充的内容是否被修改
const check_input = () => {
  if((components_fuzzy_search.value !== components_fuzzy_search.old_value) && visible.value === false)
    components_fuzzy_search.value = components_fuzzy_search.old_value
}

// 小类列表前端分页
const background = ref<boolean>(true)  // 是否带背景方框
const disabled = ref<boolean>(false)  // 是否可用
const small = ref<boolean>(false)  // 普通大小还是小一号
const currentPage = ref<number>(1)  // 当前所在页数
const pageSize = ref<number>(100)  // 一页有几条记录
const total = ref<number>(0) // 总条数
watch([currentPage, pageSize], () => {
  tableData = total_data.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})
let tableData: BigFuzzyList[] = []
let total_data: BigFuzzyList[] = []

// 弹出选择框
const visible = ref(false)

// 大类类型
export interface BigAutoCompletion {
  value: string,
  mode: '名称' | '前缀',
  big_name: string  // 模糊搜索 处理方名称
  big_id: number | ''
  old_value: string
  prefix: string
}

// 大类名称搜索
const components_fuzzy_search = reactive<BigAutoCompletion>({
  value: '',
  mode: '名称',
  big_name: '',
  big_id: '',
  old_value: '',
  prefix: '',
})

// 后台搜索
const autocomplete_big_info = () => {
  if (components_fuzzy_search.value !== components_fuzzy_search.old_value) {
    // 执行查询操作
    reqBigFuzzySearch({
      mode: components_fuzzy_search.mode,
      fuzzy_search_object: components_fuzzy_search.value
    }).then((result: BigFuzzySearchResponse) => {
      // 弹出选择框
      visible.value = true

      total_data = result.big_fuzzy_list
      tableData = total_data.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
      total.value = result.big_fuzzy_list.length
    })
  }
}

const clear_all = () => {
  clear_input()
  cmy('DataClear')
}

const inputRef = ref() // 用于关闭选择框之后使得选择框重新选中

// 选择框关闭时输入框恢复焦点
const dialog_close = () => {
  inputRef.value.focus()
}

const select_small = (row: BigFuzzyList) => {
  components_fuzzy_search.value = row.value
  components_fuzzy_search.old_value = row.value
  components_fuzzy_search.big_id = row.id
  components_fuzzy_search.big_name = row.value
  components_fuzzy_search.prefix = row.prefix
  cmy('DataUse', components_fuzzy_search)
  visible.value = false
}

// 在本子组件内触发该函数后，在父组件中执行一个函数
// DataUse：将选定的值待到父组件中
// DataClear：清空所选后，在父组件中执行操作
const cmy = defineEmits(["DataUse", "DataClear"]);


// 指定输入框中的值
const make_input_value = (val: string) => {
  components_fuzzy_search.value = val
  components_fuzzy_search.old_value = val
}

// 清除输入框中的内容
const clear_input = () => {
  components_fuzzy_search.value = ''
  components_fuzzy_search.old_value = ''
  components_fuzzy_search.big_id = ''
  components_fuzzy_search.big_name = ''
}

// 向外暴露的方法，分别是清空输入框，设置输入框中的值
defineExpose({clear_input, make_input_value});


const abc = defineProps(["disable", 'content']);
if (abc.content !== undefined) {
  components_fuzzy_search.value = components_fuzzy_search.old_value = abc.content
} else {
  components_fuzzy_search.value = components_fuzzy_search.old_value = ''
}
</script>

<style>
.input-with-select .el-input-group__prepend {
  padding: 0;
}
</style>